<!doctype html>
<html>

<head>
    <title>JWATER SSH</title>
    <link rel="stylesheet" href="../css/xterm.css" />
</head>

<body>
    <div id="terminal" style="width: 100%; height: 100%;"></div>

    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/xterm.js" charset="utf-8"></script>
    <script src="../js/webssh.js" charset="utf-8"></script>
    <script>
        var href = window.location.href;
        var index = href.indexOf('?');
        var query = href.substring(index + 1);
        var items = query.split('&');
        var host;
        var endpoint;
        for (var i = 0; i < items.length; i++) {
            var aa = items[i].split('=');
            if (aa[0] === 'host') {
                host = aa[1];
            } else if (aa[0] === 'endpoint') {
                endpoint = decodeURIComponent(aa[1]);
            }
        }
        var row = parseInt(window.innerHeight * 0.95 / 19);
        openTerminal({
            operate: 'connect',
            host: host,
            port: '',
            username: '',
            password: ''
        }, endpoint);
        function openTerminal(options, endpoint) {
            var client = new WSSHClient();
            var term = new Terminal({
                cols: 80,
                rows: row,
                cursorBlink: true, // 光标闪烁
                cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
                scrollback: 800, //回滚
                tabStopWidth: 8, //制表宽度
                screenKeys: true
            });

            term.on('data', function (data) {
                //键盘输入时的回调函数
                client.sendClientData(data);
            });
            term.open(document.getElementById('terminal'));
            //在页面上显示连接中...
            term.write('Connecting...');
            //执行连接操作
            client.connect(endpoint, {
                onError: function (error) {
                    //连接失败回调
                    term.write('Error: ' + error + '\r\n');
                },
                onConnect: function () {
                    //连接成功回调
                    client.sendInitData(options);
                },
                onClose: function () {
                    //连接关闭回调
                    term.write("\rconnection closed");
                },
                onData: function (data) {
                    //收到数据时回调
                    term.write(data);
                }
            });
        }
    </script>
</body>

</html>